<template>
    <div>
        <Tree :data="data5" :render="renderContent"></Tree>
        <Modal
            v-model="modal1"
            title="添加类"
            @on-ok="ok"
            @on-cancel="cancel">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="类名" prop="text">
            <Input v-model="formValidate.text" placeholder="Enter your name"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit(id)">Submit</Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
        </Form>

        </Modal>
        
    </div>
</template>
<script>
    export default {
        data () {
            return {
                formValidate: {
                    text:'',
                    parentId:'',
                    type:'',
                },
                ruleValidate: {
                    text: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ]
                },
                classname:{
                    text:''
                },
                data5: [],
                modal1:false,
                id:''
            }
        },
        methods: {
            handleSubmit (id) {
                // this.formValidate.title=da
                if(id.length>0){
                    // console.log(this.formValidate._id);
                    this.axios({
                        url:`http://localhost:3000/cate/${id}`,
                        method:'put',
                        data:{
                            text:this.formValidate.text,
                            type:this.formValidate.type,
                            id:this.id
                        }
                    }).then(res=>{
                        this.getlist();
                        this.modal1=false;
                    })
                }else{
                    // delete this.id;
                    this.axios({
                        url:'http://localhost:3000/cate',
                        method:'post',
                        data:this.formValidate
                    }).then(res=>{
                        this.getlist();
                        this.modal1=false;
                    })
                }
                // 添加数据
               
            },
            handleReset (text) {
                this.$refs[text].resetFields();
            },
            getlist(){
                this.axios({
                    url:'http://localhost:3000/cate/list/2',
                    method:'post'
                }).then(res=>{
                    // console.log(res.data[0]);
                    this.data5=res.data;
                })
            },
            ok () {
                this.$Message.info('Clicked ok');
            },
            cancel () {
                 Object.assign(this.$data.formValidate,this.$options.data().formValidate);
                this.$Message.info('Clicked cancel');
            },

            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-add'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => {
                                    console.log(node); 
                                    this.modal1=true;
                                    this.formValidate.parentId=data._id;
                                    this.formValidate.type=data.type;
                                    }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'md-build'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { 
                                    this.modal1=true;
                                    
                                    this.id=data._id;
                                    this.formValidate.text=data.title;
                                    
                                    this.formValidate.type=data.type;

                                }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-remove'
                                // title:'删除'
                            }),
                            on: {
                                click: () => { this.remove(data._id) }
                            }
                        })
                    ])
                ]);
            },
            // update(data) {
            //     // const children = data.children || [];
            //     // children.push({
            //     //     title: 'appended node',
            //     //     expand: true
            //     // });
            //     // this.$set(data, 'children', children);
                
            // },
            remove (id) {
                this.$Modal.confirm({
                    title: '确认删除',
                    content: '<p>Are you sure?</p>',
                    onOk: () => {
                        this.$Message.info('Clicked ok');
                        this.axios({
                            url:`http://localhost:3000/cate/${id}`,
                            method:'delete'
                        }).then(res=>{
                            this.getlist();
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('Clicked cancel');
                    }
                });    
            }
        },
        mounted(){
            this.getlist();
        }
    }
</script>
